<template>
  <div style="margin-bottom: 5px;">
    <div style="display: flex">
      <div class="name_class">
        <img style="margin-right: 10px;" width="35px" height="35px" :src="icon" alt />
        <span>{{ title }}</span>
      </div>
      <div class="value_class">
        <!-- 能够拖拽 -->
        <draggable
          class="draggable_value_class"
          v-model="selflist"
          :group="group"
          @start="drag = true"
          @end="drag = false"
          @change="change"
        >
          <div v-for="item in selflist" :key="item.code" class="feature_value_class">
            <span class="featrueValue">{{ item.title }}</span>
            <img class="icon_class" src="../img/editing.png" @click="editItem(item)" alt />
            <img class="icon_class" @click="deletes('col', item.code)" src="../img/delete.png" alt />
          </div>
          <a-button type="primary" @click="add">添加</a-button>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export const ConditionType = {
  Row: 'row',
  Col: 'col',
  Value: 'value',
}

export default {
  props: {
    type: {
      type: String,
      default: ConditionType.Row,
    },
    items: {
      type: Array,
      default: () => {
        return []
      },
    },
    title: {
      type: String,
      default: '',
    },
    group: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      selflist: [],
    }
  },
  watch: {
    items: {
      handler(newVal) {
        this.selflist = newVal.map((item) => {
          return {
            ...item,
            code: item.code,
            title: item.title,
          }
        })
      },
      deep: true,
      immediate: true,
    },
  },
  components: { draggable },
  created() {},
  computed: {
    icon() {
      if (this.type == ConditionType.Row) {
        return require('../img/row.jpg')
      } else if (this.type == ConditionType.Col) {
        return require('../img/col.jpg')
      } else if (this.type == ConditionType.Value) {
        // return require('../img/value.jpg')
      } else {
        return ''
      }
    },
  },
  methods: {
    change() {
      this.$emit('itemChange', { type: this.type, value: this.selflist })
    },
    add() {
      this.$emit('addButtonClick', { actionType: 'add', type: this.type })
    },
    editItem(item) {
      this.$emit('editButtonClick', { type: this.type, value: item })
    },
    deletes(type, code) {
      this.selflist = this.selflist.filter((item) => {
        return item.code != code
      })
      this.$emit('deleteButtonClick', { type: this.type, value: this.selflist })
    },
  },
}
</script>
<style lang="css" scoped>
.name_class {
  display: flex;
  font-size: 16px;
  align-items: center;
  font-weight: bold;
  padding: 3px 15px 3px 8px;
  /* width: 120px; */
  width: auto;
  /* border: 1px solid  */
  border: 1px solid rgb(128, 128, 128, 0.5);

  background: #eeeeee;
  border-radius: 10px 0px 0px 10px;
  color: #8a9099;
}
.value_class {
  flex: 1;
  background-color: white;
  cursor: move;
  font-size: 16px;
  padding: 5px 8px;
  border: 1px solid rgb(128, 128, 128, 0.5);
  border-left: none;
  opacity: 0.8;
}

.feature_value_class:hover {
  opacity: 0.8;
}
.draggable_value_class {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.featrueValue {
  margin-right: 20px;
  font-size: 15px;
  /* 字体间距 */
  letter-spacing: 2px;
  color: black;
}
.icon_class {
  /* font-size: 12px; */
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background-color: '#eeeeee';
  font-weight: bolder;
  cursor: pointer;
}
.feature_value_class {
  /* 垂直居中 */
  position: relative;
  display: flex;
  margin-right: 10px;
  align-items: center;
  padding: 5px 10px;
  /* width: 261px;
  height: 59px; */
  background: #eeeeee;
  border-radius: 10px;
  border: 1px solid #dbe1e1;
}
</style>
